We provide multiple options for downloading the Design System, as well as specific downloads for icons, design tokens and swatches.
Find us on GitHub
Instead of downloading the Design System you can also fork or clone it on GitHub.Design System on GitHub
If you use npm in your local development environment, it can be installed with the following command:
npm install @salesforce-ux/design-system --save
If you use Bower in your local development environment, it can be installed with the following command:
bower install salesforce-lightning-design-system --save
Design System Zip
Download the pre-built CSS framework, font and icons to include in your project. See the release notes for details on the latest updates.
Design System Unmanaged Package
The unmanaged package has been deprecated.
The Lightning Design System CSS is now automatically included for Lightning Components running in the Lightning Experience and Salesforce S1 mobile application (via app.css). It is no longer necessary to add a static resource for Lightning Components running within these environments.
There are still cases where you will need to use a static resource. Current examples are — within Visualforce, when building a standalone Lightning Application (my.app), or in a component that will be used via Lightning Out. In this case, we have provided a tool for you to create your custom-scoped CSS.
Download all icon sets. Each icon is available as SVG and in two different PNG sizes.
All icons are licensed under Creative Commons Attribution-NoDerivatives 4.0.
Design Tokens are available in multiple formats depending on which technology your application uses. For web-based applications, you can use our tokens as variables through CSS preprocessors Sass, Less, and Stylus. We recommend Sass as we use it internally, it is well-documented, and is the industry standard.
For native applications, our tokens are available in XML and JSON formats for the Android and iOS platforms, respectively.
You can import color swatches for use in design applications like Photoshop and Sketch. Since the CLR format does not include the alpha value, we’ve appended each color’s name with it.